<template>
  <div style="padding: 24px 36px 0 36px" class="flex">
    <div>
      <!-- 平台课程数量 -->
      <dataCard title="学习课程" v-loading="card1_loading" height="278">
        <div class="card1 viewcard">
          <div class="titleLine flexbet">
            <img
              src="@/assets/images/screen/courseLearning/icon1.png"
              alt=""
              class="icon"
            />
            <div class="txt flex">
              平台课程数量
              <div>
                {{
                  card1_courseLearningData.platformCourseNum
                    ? card1_courseLearningData.platformCourseNum
                    : 0
                }}
              </div>
              门
            </div>
            <div
              class="more shou"
              @click="to('/dataView/trainer_coursesDetail')"
            >
              平台各课程明细 >
            </div>
          </div>
          <div class="data flexbet">
            <div class="item">
              <div class="value">
                {{
                  card1_courseLearningData.allStudentNum
                    ? card1_courseLearningData.allStudentNum
                    : 0
                }}
              </div>
              <div class="lable">学习总人数</div>
            </div>
            <div class="item">
              <div class="value">
                {{
                  card1_courseLearningData.fullTimeStudentNum
                    ? card1_courseLearningData.fullTimeStudentNum
                    : 0
                }}
              </div>
              <div class="lable">全职学习人数</div>
            </div>
            <div class="item">
              <div class="value">
                {{
                  card1_courseLearningData.partTimeStudentNum
                    ? card1_courseLearningData.partTimeStudentNum
                    : 0
                }}
              </div>
              <div class="lable">兼职学习人数</div>
            </div>
            <div class="item">
              <div class="value">
                {{
                  card1_courseLearningData.noCourseUserNum
                    ? card1_courseLearningData.noCourseUserNum
                    : 0
                }}
              </div>
              <div class="lable">未下发人数</div>
            </div>
          </div>
          <div class="bottomLine flexend">
            <div style="margin-right: 20px;" class="more shou" @click="shuang_Dia_open = true">
              兼职&全职双岗位详情 >
            </div>
            <div
              class="more shou"
              @click="to('/dataView/trainer_coursesNotIssuedDetail')"
            >
              未下发课程账号明细 >
            </div>
          </div>
        </div>
      </dataCard>
      <!-- 考核成绩情况 -->
      <dataCard
        title="考核成绩情况"
        v-loading="card2_loading"
        height="648"
        style="margin-top: 24px"
      >
        <div class="card2 viewcard">
          <div class="titleLine flexbet">
            <img
              src="@/assets/images/screen/courseLearning/icon2.png"
              alt=""
              class="icon"
            />
            <div class="txt flex">
              考核平均分
              <div>
                {{
                  card2_examAvgScore.examAvgScore
                    ? card2_examAvgScore.examAvgScore
                    : 0
                }}
              </div>
              分
            </div>
            <div style="width: 120px"></div>
            <!-- <div class="more shou" >平台各课程明细 ></div> -->
          </div>
          <!-- 员工考核平均分排行榜 -->
          <div class="rankingOfTheAverageScoreOfEmployeeAppraisal">
            <div class="ranktitle flexbet">
              <div class="txt flexcolcenter">
                <img src="@/assets/images/screen/lineIcon.png" alt="" />
                员工考核平均分排行榜
              </div>
              <div
                class="more shou"
                @click="courseLearning_stuExamAvgScoreList_Dia_open = true"
              >
                详情 >
              </div>
            </div>
            <div class="flexbet">
              <!--<div class="Nobox">
                <div class="No" v-for="i in 5" :key="i">{{ i }}</div>
              </div>-->
              <div ref="rankPeople" style="width: 550px; height: 230px"></div>
            </div>
          </div>
          <!-- 门店考核平均分排行榜 -->
          <div class="storeAssessmentAverageScoreRanking">
            <div class="ranktitle flexbet">
              <div class="txt flexcolcenter">
                <img src="@/assets/images/screen/lineIcon.png" alt="" />
                门店考核平均分排行榜
              </div>
              <div
                class="more shou"
                @click="courseLearning_schoolExamAvgScoreList_Dia_open = true"
              >
                详情 >
              </div>
            </div>
            <div class="tableBox">
              <el-table
                ref="tableRef"
                :data="card2_schoolExamAvgScoreList"
                style="width: 100%"
              >
                <el-table-column prop="date" label="排名" width="50">
                  <template slot-scope="scope">
                    <div class="No">{{ scope.$index + 1 }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="schoolName"
                  label="门店名称"
                  width="250"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="avgScore"
                  label="考核平均分"
                  width="100"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="stuNum" label="考核人数" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </dataCard>
    </div>
    <div>
      <dataCard
        v-loading="card3_loading"
        title="学习完成情况"
        height="507"
        style="margin: 0 0 0 20px"
      >
        <template v-slot:header>
          <div
            class="headerMore shou"
            @click="to('/dataView/trainer_unfinishUserDetail')"
          >
            未完成员工明细 >
          </div>
        </template>
        <div class="card3 viewcard">
          <!-- 全职完成率和兼职完成率 -->
          <div class="rates flex" style="margin-top: 6px">
            <div class="rateItem flex">
              <img
                class="rateItemIcon"
                src="@/assets/images/screen/courseLearning/icon3_2.png"
                alt=""
              />
              <div class="line">
                <div class="value">
                  <span style="color: #333333; font-weight: 600">{{
                    card3_learningCompletionStatus &&
                    card3_learningCompletionStatus.fullTimeCompletionRate
                      ? (
                          card3_learningCompletionStatus.fullTimeCompletionRate *
                          100
                        ).toFixed(2)
                      : 0
                  }}</span
                  >%
                </div>
                <div class="label">全职完成率</div>
              </div>
            </div>
            <div class="rateItem flex" style="margin-left: 73px">
              <img
                class="rateItemIcon"
                src="@/assets/images/screen/courseLearning/icon3_1.png"
                alt=""
              />
              <div class="line">
                <div class="value">
                  <span style="color: #333333; font-weight: 600">{{
                    card3_learningCompletionStatus &&
                    card3_learningCompletionStatus.partTimeCompletionRate
                      ? (
                          card3_learningCompletionStatus.partTimeCompletionRate *
                          100
                        ).toFixed(2)
                      : 0
                  }}</span
                  >%
                </div>
                <div class="label">兼职完成率</div>
              </div>
            </div>
          </div>
          <!-- 各门店各课程学习完成率 -->
          <div class="ranktitle flexbet">
            <div class="txt flexcolcenter">
              <img src="@/assets/images/screen/lineIcon.png" alt="" />
              各门店各课程学习完成率
            </div>
            <div
              class="more shou"
              @click="courseLearning_eachCourseCompletionRate_Dia_open = true"
            >
              详情 >
            </div>
          </div>
          <div class="rela">
            <div
              v-show="card3_eachCourseCompletionRate.length > 0"
              ref="studyFinishRate"
              style="width: 600px; height: 325px"
            ></div>
            <el-empty
              v-show="card3_eachCourseCompletionRate.length == 0"
              description="暂无数据"
            ></el-empty>
            <div class="abso select card3se">
              <!-- :popper-append-to-body="false" -->
              <el-select
                @change="selectSchool"
                style="width: 140px; margin-left: 20px"
                size="mini"
                v-model="card3_schoolId"
                placeholder="请选择"
              >
                <el-option label="全部" :value="0"></el-option>
                <el-option
                  v-for="item in card3_schoolList"
                  :key="item.schoolId"
                  :label="item.schoolName"
                  :value="item.schoolId"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
      </dataCard>
      <dataCard
        title="题库情况"
        height="421"
        v-loading="card4_loading"
        style="margin: 20px 0 0 20px"
      >
        <div class="card4 viewcard">
          <!-- 题库总数 -->
          <div class="topicBox flex">
            <div class="sum">
              <div class="value">
                {{ card4_topicNum.totalNum ? card4_topicNum.totalNum : 0 }}
              </div>
              <div class="label">题库总数</div>
            </div>
            <div class="item">
              <div class="value">
                {{ card4_topicNum.singleNum ? card4_topicNum.singleNum : 0 }}
              </div>
              <div class="label">单选题</div>
            </div>
            <div class="item">
              <div class="value">
                {{
                  card4_topicNum.multipleNum ? card4_topicNum.multipleNum : 0
                }}
              </div>
              <div class="label">多选题</div>
            </div>
            <div class="item">
              <div class="value">
                {{ card4_topicNum.judgeNum ? card4_topicNum.judgeNum : 0 }}
              </div>
              <div class="label">判断题</div>
            </div>

            <div class="item">
              <div class="value">
                {{ card4_topicNum.fillNum ? card4_topicNum.fillNum : 0 }}
              </div>
              <div class="label">填空题</div>
            </div>
            <div class="item">
              <div class="value">
                {{ card4_topicNum.briefNum ? card4_topicNum.briefNum : 0 }}
              </div>
              <div class="label">简答题</div>
            </div>
            <div class="item">
              <div class="value">
                {{ card4_topicNum.operateNum ? card4_topicNum.operateNum : 0 }}
              </div>
              <div class="label">操作题</div>
            </div>
          </div>
          <!-- 题目错误率排行榜 -->
          <div class="errorRanking" style="margin-top: 41px">
            <div class="ranktitle flexbet">
              <div class="txt flexcolcenter">
                <img src="@/assets/images/screen/lineIcon.png" alt="" />
                题目错误率排行榜
              </div>
              <div
                class="more shou"
                @click="courseLearning_topicErrorRateList_Dia_open = true"
              >
                详情 >
              </div>
            </div>
            <div class="tableBox">
              <el-table :data="card4_topicErrorRateList" style="width: 100%">
                <el-table-column prop="date" label="排名" width="50">
                  <template slot-scope="scope">
                    <div class="No">{{ scope.$index + 1 }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="courseName"
                  label="课程名称"
                  width="250"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="content"
                  label="题干"
                  width="100"
                  align="center"
                >
                </el-table-column>
                <el-table-column prop="errorRate" label="错误率" align="center">
                  <template slot-scope="scope">
                    {{ scope.row.errorRate }}%
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </dataCard>
    </div>
    <div>
      <dataCard
        title="学习时长情况"
        v-loading="card5_loading"
        height="507"
        style="margin: 0 0 0 20px"
      >
        <div class="card5 viewcard">
          <!-- 课程综合评分 -->
          <div class="titleLine flexbet" style="margin: 24px 0 0 0">
            <img
              style="width: 60px; height: 60px"
              src="@/assets/images/screen/courseLearning/icon5.png"
              alt=""
              class="icon"
            />
            <div class="txt flex">
              累计学习总时长
              <div>
                {{
                  card5_totalStudyDuration &&
                  card5_totalStudyDuration.totalStudyDuration
                    ? card5_totalStudyDuration.totalStudyDuration
                    : 0
                }}
              </div>
              时
            </div>
            <div class="more shou" style="width: 110px"></div>
          </div>
          <!--  学习时长排行榜-->
          <div class="studyTimeRanking" style="margin-top: 24px">
            <div class="ranktitle flexbet">
              <div class="txt flexcolcenter">
                <img src="@/assets/images/screen/lineIcon.png" alt="" />
                学习时长排行榜
              </div>
              <div
                class="more shou"
                @click="courseLearning_studyDurationList_Dia_open = true"
              >
                详情 >
              </div>
            </div>
            <div class="progressBox">
              <div
                class="item"
                v-for="(item, index) in card5_studyDurationList"
                :key="index"
              >
                <div class="line flexbet">
                  <div class="no_name flex">
                    <div class="no">{{ index + 1 }}</div>
                    <div class="name">{{ item.stuName }}</div>
                  </div>
                  <div class="store overtxt">{{ item.schoolName }}</div>
                  <div class="time">
                    {{
                      $convertSeconds(
                        item.studyDuration ? item.studyDuration * 60 : 0
                      )
                    }}
                  </div>
                </div>
                <div class="progress rela">
                  <div
                    class="progress-bar abso"
                    :style="{
                      width: (item.studyDuration / maxTime) * 100 + '%',
                    }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </dataCard>
      <dataCard
        title="课程评分情况"
        v-loading="card6_loading"
        height="421"
        style="margin: 20px 0 0 20px"
      >
        <div class="card6 viewcard">
          <!-- 课程综合评分 -->
          <div class="titleLine flexbet" style="margin: 24px 0 0 0">
            <img
              src="@/assets/images/screen/courseLearning/icon6.png"
              alt=""
              class="icon"
            />
            <div class="txt flex">
              课程综合评分
              <div>
                {{
                  card6_totalCourseStar && card6_totalCourseStar.totalCourseStar
                    ? card6_totalCourseStar.totalCourseStar
                    : 0
                }}
              </div>
              分
            </div>
            <div
              class="more shou"
              @click="to('/dataView/trainer_courseEvaluationDetail')"
            >
              课程评价明细 >
            </div>
          </div>
          <!-- 课程评分排行榜 -->
          <div class="errorRanking" style="margin-top: 57px">
            <div class="ranktitle flexbet">
              <div class="txt flexcolcenter">
                <img src="@/assets/images/screen/lineIcon.png" alt="" />
                课程评分排行榜
              </div>
              <div
                class="more shou"
                @click="courseLearning_courseStarList_Dia_open = true"
              >
                详情 >
              </div>
            </div>
            <div class="tableBox">
              <el-table :data="card6_courseStarList" style="width: 100%">
                <el-table-column prop="date" label="排名" width="50">
                  <template slot-scope="scope">
                    <div class="No">{{ scope.$index + 1 }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="courseName"
                  label="课程名称"
                  width="250"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="courseStar"
                  label="综合评分"
                  width="100"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="evaluateNum"
                  label="评分人数"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </dataCard>
    </div>
    <shuang_Dia :open.sync="shuang_Dia_open"></shuang_Dia>
    <courseLearning_stuExamAvgScoreList_Dia
      :open.sync="courseLearning_stuExamAvgScoreList_Dia_open"
    ></courseLearning_stuExamAvgScoreList_Dia>
    <courseLearning_schoolExamAvgScoreList_Dia
      :open.sync="courseLearning_schoolExamAvgScoreList_Dia_open"
    ></courseLearning_schoolExamAvgScoreList_Dia>
    <courseLearning_eachCourseCompletionRate_Dia
      :open.sync="courseLearning_eachCourseCompletionRate_Dia_open"
    ></courseLearning_eachCourseCompletionRate_Dia>
    <courseLearning_topicErrorRateList_Dia
      :open.sync="courseLearning_topicErrorRateList_Dia_open"
    ></courseLearning_topicErrorRateList_Dia>
    <courseLearning_studyDurationList_Dia
      :open.sync="courseLearning_studyDurationList_Dia_open"
    ></courseLearning_studyDurationList_Dia>
    <courseLearning_courseStarList_Dia
      :open.sync="courseLearning_courseStarList_Dia_open"
    ></courseLearning_courseStarList_Dia>
  </div>
</template>

<script>
import {
  studyCourseSituation,
  examAvgScore,
  stuExamAvgScoreList,
  schoolExamAvgScoreList,
  learningCompletionStatus,
  eachCourseCompletionRate,
  topicNum,
  topicErrorRateList,
  schoolList,
  totalStudyDuration,
  studyDurationList,
  totalCourseStar,
  courseStarList,
} from "@/api/screen/courseLearningManagement";
import * as echarts from "echarts";
import dataCard from "./components/dataCard";
import courseLearning_stuExamAvgScoreList_Dia from "./components/courseLearning_stuExamAvgScoreList_Dia";
import courseLearning_schoolExamAvgScoreList_Dia from "./components/courseLearning_schoolExamAvgScoreList_Dia";
import courseLearning_eachCourseCompletionRate_Dia from "./components/courseLearning_eachCourseCompletionRate_Dia";
import courseLearning_topicErrorRateList_Dia from "./components/courseLearning_topicErrorRateList_Dia";

import courseLearning_studyDurationList_Dia from "./components/courseLearning_studyDurationList_Dia";
import courseLearning_courseStarList_Dia from "./components/courseLearning_courseStarList_Dia";
import shuang_Dia from "./components/shuang_Dia";
export default {
  components: {
    dataCard,
    courseLearning_stuExamAvgScoreList_Dia,
    courseLearning_schoolExamAvgScoreList_Dia,
    courseLearning_eachCourseCompletionRate_Dia,
    courseLearning_topicErrorRateList_Dia,
    courseLearning_studyDurationList_Dia,
    courseLearning_courseStarList_Dia,
    shuang_Dia,
  },
  data() {
    return {
      shuang_Dia_open: false,
      courseLearning_stuExamAvgScoreList_Dia_open: false,
      courseLearning_schoolExamAvgScoreList_Dia_open: false,
      courseLearning_eachCourseCompletionRate_Dia_open: false,
      courseLearning_topicErrorRateList_Dia_open: false,
      courseLearning_studyDurationList_Dia_open: false,
      courseLearning_courseStarList_Dia_open: false,
      // card1
      card1_courseLearningData: {},
      card1_loading: false,
      // card2
      card2_examAvgScore: {},
      card2_stuExamAvgScoreList: [],
      card2_schoolExamAvgScoreList: [],
      card2_loading: false,
      // card3
      card3_learningCompletionStatus: {},
      card3_eachCourseCompletionRate: [],
      card3_schoolList: [],
      card3_loading: false,
      card3_schoolId: 0,
      // card4
      card4_topicNum: {},
      card4_topicErrorRateList: [],
      card4_loading: false,
      // card5
      card5_totalStudyDuration: {},
      card5_studyDurationList: [
        {
          schoolName: "---",
          stuName: "---",
          studyDuration: 0,
        },
        {
          schoolName: "---",
          stuName: "---",
          studyDuration: 0,
        },
        {
          schoolName: "---",
          stuName: "---",
          studyDuration: 0,
        },
        {
          schoolName: "---",
          stuName: "---",
          studyDuration: 0,
        },
        {
          schoolName: "---",
          stuName: "---",
          studyDuration: 0,
        },
      ],
      card5_loading: false,
      // card6
      card6_totalCourseStar: {},
      card6_courseStarList: [],
      card6_loading: false,
      maxTime: 1000,
    };
  },
  mounted() {
    this.getCard1_data();
    this.getCard2_data();
    this.getCard3_data();
    this.getCard4_data();
    this.getCard5_data();
    this.getCard6_data();
  },
  methods: {
    to(path) {
      this.$router.push({ path: path });
    },
    async getCard5_data() {
      this.card5_loading = true;

      try {
        const [api1Data, api2Data] = await Promise.all([
          totalStudyDuration(),
          studyDurationList({
            pageNum: 1,
            pageSize: 5,
          }),
        ]);
        this.card5_totalStudyDuration = api1Data.data;
        this.card5_studyDurationList = api2Data.rows;
        this.maxTime = api2Data.rows.reduce((max, current) => {
          return current.studyDuration > max ? current.studyDuration : max;
        }, -Infinity);
      } finally {
        this.card5_loading = false;
      }
    },
    async getCard6_data() {
      this.card6_loading = true;

      try {
        const [api1Data, api2Data] = await Promise.all([
          totalCourseStar(),
          courseStarList({
            pageNum: 1,
            pageSize: 5,
          }),
        ]);
        this.card6_totalCourseStar = api1Data.data;
        this.card6_courseStarList = api2Data.rows;
      } finally {
        this.card6_loading = false;
      }
    },
    async selectSchool() {
      console.log("selectSchool", this.card3_schoolId);
      let res;
      try {
        res = await eachCourseCompletionRate({
          schoolId: this.card3_schoolId,
          pageNum: 1,
          pageSize: 10,
        });
        if (res.code == 200) {
          this.card3_eachCourseCompletionRate = res.rows;
          this.initCard3_Chart(this.card3_eachCourseCompletionRate);
        }
      } finally {
      }
    },
    async getCard4_data() {
      this.card4_loading = true;

      try {
        const [api1Data, api2Data] = await Promise.all([
          topicNum(),
          topicErrorRateList({
            pageNum: 1,
            pageSize: 5,
          }),
        ]);
        this.card4_topicNum = api1Data.data;
        this.card4_topicErrorRateList = api2Data.rows;
      } finally {
        this.card4_loading = false;
      }
    },
    async getCard3_data() {
      this.card3_loading = true;

      try {
        const [api1Data, api2Data, api3Data] = await Promise.all([
          learningCompletionStatus(),
          eachCourseCompletionRate({
            pageNum: 1,
            pageSize: 10,
            schoolId: this.card3_schoolId,
          }),
          schoolList({
            pageNum: 1,
            pageSize: 9999,
          }),
        ]);
        this.card3_learningCompletionStatus = api1Data.data;
        this.card3_eachCourseCompletionRate = api2Data.rows;
        this.card3_schoolList = api3Data.rows;
        // this.card3_schoolId = 1;
        this.initCard3_Chart(this.card3_eachCourseCompletionRate);
      } finally {
        this.card3_loading = false;
      }
    },
    async getCard2_data() {
      this.card2_loading = true;

      try {
        const [api1Data, api2Data, api3Data] = await Promise.all([
          examAvgScore(),
          stuExamAvgScoreList({
            pageNum: 1,
            pageSize: 8,
          }),
          schoolExamAvgScoreList({
            pageNum: 1,
            pageSize: 5,
          }),
        ]);
        this.card2_examAvgScore = api1Data.data;
        this.card2_stuExamAvgScoreList = api2Data.rows;
        this.initCard2_Chart(this.card2_stuExamAvgScoreList);
        this.card2_schoolExamAvgScoreList = api3Data.rows;
      } finally {
        this.card2_loading = false;
      }
    },
    async getCard1_data() {
      let res;
      try {
        this.card1_loading = true;
        res = await studyCourseSituation();
        if (res.code == 200) {
          this.card1_courseLearningData = res.data;
        }
      } finally {
        this.card1_loading = false;
      }
    },
    initCard3_Chart(list) {
      let courseNames = list.map((item) => {
        return `${item.courseName}`;
      });
      let fullTimeCompletionRates = list.map((item) => {
        return (item.fullTimeCompletionRate * 100).toFixed(2);
      });
      let partTimeCompletionRates = list.map((item) => {
        return (item.partTimeCompletionRate * 100).toFixed(2);
      });
      const chartDom = this.$refs.studyFinishRate;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          top: "15px",
          // 图例的文字样式
          textStyle: {
            color: "#333",
          },
          data: ["全职完成率", "兼职完成率"],
        },
        grid: {
          left: "20px",
          right: "50px",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: courseNames,
          axisLabel: {
            // offset: 50, // 水平方向上移动 X 轴，单位为像素
            rotate: 45, // 旋转角度
            interval: 0, // 强制显示所有标签
            margin: 20, // 标签与轴线的距离
            // align: "center", // 标签对齐方式
            // // offset: [100, 0], // 微调标签位置，第一个值是水平方向，第二个值是垂直方向
            // textStyle: {
            //   fontSize: 12, // 标签字体大小
            // },
            axisTick: {
              alignWithLabel: true, // 使刻度线与标签对齐
            },
          },
        },
        // xAxis: [
        //   {
        //     type: "category",
        //     boundaryGap: false,
        //     data: courseNames,
        //     axisTick: {
        //       alignWithLabel: true,
        //     },
        //     axisLabel: {
        //       // offset: 50, // 水平方向上移动 X 轴，单位为像素
        //       rotate: 45, // 旋转角度
        //       interval: 0, // 强制显示所有标签
        //       margin: 20, // 标签与轴线的距离
        //       // align: "center", // 标签对齐方式
        //       // offset: [100, 0], // 微调标签位置，第一个值是水平方向，第二个值是垂直方向
        //       textStyle: {
        //         fontSize: 12, // 标签字体大小
        //       },
        //       axisTick: {
        //         alignWithLabel: true, // 使刻度线与标签对齐
        //       },
        //     },
        //   },
        // ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "全职完成率",
            type: "line",
            lineStyle: {
              color: "#ff8200", // 设置线条颜色
            },
            itemStyle: {
              color: "#ff8200", // 设置图例颜色
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,

                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 144, 0, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 144, 0, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            emphasis: {
              focus: "series",
            },
            data: fullTimeCompletionRates,
            smooth: true,
          },
          {
            name: "兼职完成率",
            type: "line",
            lineStyle: {
              color: "#da93f2", // 设置线条颜色
            },
            itemStyle: {
              color: "#da93f2", // 设置图例颜色
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,

                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(218, 147, 242, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(134, 116, 255, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },

            emphasis: {
              focus: "series",
            },
            data: partTimeCompletionRates,
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
    },
    initCard2_Chart(list) {
      let avgScores = list.map((item) => {
        return item.avgScore;
      });
      let stuNames = list.map((item) => {
        return `${item.stuName}(${item.schoolName})`;
      });
      let stuNamelabels = list.map((item) => {
        return `${item.stuName}`;
      });
      let schoolNames = list.map((item, index) => {
        return item.schoolName ? item.schoolName : "--";
      });
      let studyCourseNums = list.map((item) => {
        return item.studyCourseNum;
      });
      const chartDom = this.$refs.rankPeople;
      const myChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          top: "20px",
          // 图例的文字样式
          // 显示名字加门店名字
          textStyle: {
            color: "#333",
          },
          data: ["学习任务量", "考试平均分"],
        },
        grid: {
          left: "0%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: stuNames,
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              formatter: function (params) {
                return params.match(/^[^(]+/)[0];
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "学习任务量",
            position: "right",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "考试平均分",
            position: "left",
            alignTicks: true,
            axisLine: {
              show: true,
              lineStyle: {
                color: "#999999",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "学习任务量",
            type: "bar",
            barWidth: "60%",
            data: studyCourseNums,
            yAxisIndex: 0, // 指定使用右侧的 Y 轴
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 1, // 起始点在底部
                x2: 0,
                y2: 0, // 结束点在顶部
                colorStops: [
                  { offset: 0, color: "#FF8A4F" }, // 渐变色起始颜色
                  { offset: 1, color: "#FFF2C8" }, // 渐变色结束颜色
                ],
                global: false, // 缺省为 false
              },
            },
            barWidth: "8px", // 设置柱状图的宽度
            label: {
              show: false,
              position: "inside", // 文字位置，设置为 "inside" 表示在柱子内部
              color: "#333359", // 文字颜色

              formatter: function (params) {
                return schoolNames[params.dataIndex];
              },
            },
          },
          {
            name: "考试平均分",
            type: "line",
            smooth: true,
            symbolSize: 10,
            data: avgScores,
            yAxisIndex: 1, // 指定使用左侧的 Y 轴
          },
        ],
      };
      // const option = {
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       // Use axis to trigger tooltip
      //       type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      //     },
      //   },
      //   legend: {
      //     // 图例的位置
      //     top: "20px",
      //     // 图例的文字样式
      //     textStyle: {
      //       color: "#333",
      //     },

      //     // // 图例的图标形状
      //     // icon: "circle",
      //     // 图例的数据
      //     data: ["学习任务量", "考核平均分"],
      //   },
      //   grid: {
      //     left: "5px",
      //     right: "50px",
      //     bottom: "0",
      //     containLabel: true,
      //   },
      //   xAxis: {
      //     type: "value",
      //   },
      //   yAxis: {
      //     type: "category",
      //     data: stuNames,
      //   },
      //   series: [
      //     {
      //       name: "学习任务量",
      //       type: "bar",
      //       stack: "total",
      //       label: {
      //         show: true,
      //         position: "inside", // 文字位置，设置为 "inside" 表示在柱子内部
      //         color: "#333359", // 文字颜色
      //         offset: [120, 0], // 微调标签的位置，[x, y]，单位为像素
      //         formatter: function (params) {
      //           // 获取对应的门店名称
      //           return schoolNames[params.dataIndex];
      //         },
      //       },
      //       emphasis: {
      //         focus: "series",
      //       },
      //       itemStyle: {
      //         color: {
      //           type: "linear",
      //           x: 0,
      //           y: 0,
      //           x2: 1,
      //           y2: 0,
      //           colorStops: [
      //             { offset: 0, color: "#FF8A4F" }, // 渐变色起始颜色
      //             { offset: 1, color: "#FFF2C8" }, // 渐变色结束颜色
      //           ],
      //           global: false, // 缺省为 false
      //         },
      //       },
      //       barWidth: "8px", // 设置柱状图的宽度
      //       data: studyCourseNums,
      //     },
      //     {
      //       name: "考核平均分",
      //       type: "bar",
      //       stack: "total",
      //       label: {
      //         show: false,
      //         color: "black", // 文字颜色
      //       },
      //       emphasis: {
      //         focus: "series",
      //       },
      //       itemStyle: {
      //         color: {
      //           type: "linear",
      //           x: 0,
      //           y: 0,
      //           x2: 1,
      //           y2: 0,
      //           colorStops: [
      //             { offset: 0, color: "#679DFC" }, // 渐变色起始颜色
      //             { offset: 1, color: "#DBF6FF" }, // 渐变色结束颜色
      //           ],
      //           global: false, // 缺省为 false
      //         },
      //       },
      //       barWidth: "8px", // 设置柱状图的宽度
      //       data: avgScores,
      //     },
      //   ],
      // };

      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.card5 {
  .progressBox {
    padding-left: 20px;
    .item:nth-of-type(1) .no {
      color: #ff5806 !important;
    }
    .item:nth-of-type(2) .no {
      color: #ffa63b !important;
    }
    .item:nth-of-type(3) .no {
      color: #ffd03b !important;
    }
    .item {
      margin-top: 17px;

      .line {
        .no_name {
          .no {
            margin: 0 15px 0 9px;
            color: #999999;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;

            line-height: 22px;
            font-style: normal;
          }
          .name {
            width: 120px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
            font-style: normal;
          }
        }
        .store {
          width: 250px;
          text-align: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          line-height: 20px;

          font-style: normal;
        }
        .time {
          width: 115px;
          text-align: right;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #9a8157;
          line-height: 19px;
          font-style: normal;
        }
      }

      .progress {
        margin-top: 5px;
        width: 532px;
        height: 4px;
        background: rgba(0, 0, 0, 0.05);
        border-radius: 2px;
        .progress-bar {
          height: 4px;
          border-radius: 2px;
          background: linear-gradient(270deg, #ff6801 0%, #ffe9ce 100%);
        }
      }
    }
  }
}
.card4 {
  .topicBox {
    margin-top: 24px;
    width: 552px;
    height: 88px;
    background: linear-gradient(180deg, #fee8d9 0%, #fefaf5 100%);
    border-radius: 8px;
    box-sizing: border-box;
    padding: 13px 0 15px 21px;
    .sum {
      margin-right: 2px;
      padding-right: 25px;
      border-right: 1px solid #e5ddd2;
      .value {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #333333;
        line-height: 30px;
        text-align: center;
        font-style: normal;
      }
      .label {
        margin-top: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #666666;
        line-height: 21px;
        text-align: center;
        font-style: normal;
      }
    }
    .item {
      width: 73px;
      .value {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 22px;
        color: #333333;
        line-height: 30px;
        text-align: center;
        font-style: normal;
      }
      .label {
        margin-top: 5px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #666666;
        line-height: 21px;
        text-align: center;
        font-style: normal;
      }
    }
  }
}
.card3 {
  .select {
    top: 10px;
    right: 0;
  }
  .rates {
    padding: 6px 0 15px 82px;
    .rateItem {
      .rateItemIcon {
        width: 71px;
        height: 71px;
      }
      .line {
        margin: 8px 0 0 12px;
        .value {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #666666;
          line-height: 21px;
          font-style: normal;
          span {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28px;
            color: #ff6801;
            line-height: 40px;
            font-style: normal;
          }
        }
        .label {
          margin-top: -5px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #666666;
          line-height: 21px;
          font-style: normal;
        }
      }
    }
  }
}
.viewcard {
  .ranktitle {
    .txt {
      img {
        margin-right: 3px;
        width: 8px;
        height: 11px;
      }
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
    .more {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #666666;
      line-height: 22px;
      font-style: normal;
    }
  }
  .titleLine {
    width: 540px;
    height: 72px;
    background: linear-gradient(180deg, #fee8d9 0%, #fefaf5 100%);
    border-radius: 8px;
    .icon {
      margin: 8px 0 0 7px;
      width: 55px;
      height: 55px;
    }
    .txt {
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #333333;
      line-height: 72px;
      font-style: normal;
      div {
        margin: 0 5px;
        line-height: 68px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32px;
        color: #ff6801;
        font-style: normal;
      }
    }
    .more {
      line-height: 72px;
      margin-right: 19px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #666666;
      font-style: normal;
    }
  }
}
.card1 {
  padding: 20px 0 22px 13px;

  .data {
    padding: 0 25px;
    .item {
      width: 90px;
      .lable {
        margin-top: 5px;
        width: 90px;
        height: 21px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #666666;
        line-height: 21px;
        text-align: center;
        font-style: normal;
      }
      .value {
        margin-top: 17px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28px;
        color: #333333;
        line-height: 40px;
        text-align: center;
        font-style: normal;
      }
    }
  }
  .bottomLine {
    margin: 16px 19px 0 0;
    .more {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 12px;
      color: #666666;
      line-height: 17px;

      font-style: normal;
    }
  }
}
.Nobox {
  padding: 66px 0 0 10px;
  .No {
    margin-bottom: 10.5px;
  }
}
.No {
  font-size: 12px;
  color: #fff3ea;
  font-style: normal;
  width: 24px;
  height: 19px;
  text-align: center;
  line-height: 19px;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffa721 0%, #ff7136 100%);
}
.tableBox {
  margin-top: 10px;
  ::v-deep .el-table th {
    border: none;
    padding: 2px 0;
    height: 28px; /* 设置表头高度 */
    line-height: 28px; /* 设置表头文字的垂直对齐方式 */
  }

  /* 更改每一行的高度 */
  ::v-deep .el-table td,
  th {
    border: none;
    padding: 2px 0;
    height: 28px; /* 设置行高 */
    line-height: 28px; /* 设置单元格文字的垂直对齐方式 */
  }
  ::v-deep .el-table .el-table__header-wrapper tr th {
    background: white;
  }
  ::v-deep .el-table .el-table__header-wrapper tr th .cell {
    font-weight: 600 !important;
  }
  ::v-deep .el-table .el-table__body tr:nth-of-type(2n + 1) {
    background: rgba($color: #000000, $alpha: 0.03);
  }
  ::v-deep .el-table .cell {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    color: #333333;
    font-style: normal;
  }
}
.card2 {
  padding: 16px 0 22px 13px;
  .rankingOfTheAverageScoreOfEmployeeAppraisal {
    margin-top: 20px;
  }
  .storeAssessmentAverageScoreRanking {
    margin-top: 20px;
  }
}
::v-deep .card3se .el-input__inner {
  color: #ff5806 !important;
  border-color: #ff5806 !important;
}

::v-deep .el-select-dropdown__item.selected {
  color: #ff5806 !important;
  font-weight: 700;
}
</style>